<template>
  <div class="header" :style="{background: (header.bgcolor)}">
    <div class="head-input">
      <span class="iconfont" style="font-size: 16px; margin-right: 10px;">&#xe632;</span>
      <span>{{header.search}}</span>
    </div>
    <div class="head-tab">
      <span class="iconfont" style="font-size: 24px;">&#xe61f;</span>
      <div style="flex: 1;margin-right:0.2rem">
        <el-select v-model="header.select.value" placeholder="请选择">
          <el-option
            v-for="item in header.select.options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="head-location" style="">
      <span class="iconfont" style="font-size: 24px;">&#xe698;</span>
      <div style="flex: 1;" @click="handleLocationClick">{{getCity}}</div>
    </div>
    <van-popup v-model="popup_show" position="bottom">
      <van-area :area-list="area.list" @confirm="areaConfirm" @cancel="areaCancel">
      </van-area>
    </van-popup>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Header',
  props: {
    header: {
      type: Object,
      required: true
    }
  },
  data: function () {
    return {
      popup_show: false,
      area: {
        list: Object
      }
    }
  },
  computed: {
    getCity: function () {
      return this.$store.state.city
    }
  },
  mounted: function () {
    this.getAreaInfo()
  },
  methods: {
    handleLocationClick: function () {
      this.popup_show = true
    },
    areaConfirm: function (data) {
      let len = data.length - 1
      this.popup_show = false
      this.$store.dispatch('changeCity', data[len].name)
    },
    areaCancel: function () {
      this.popup_show = false
    },
    getAreaInfo: function () {
      axios.get('/static/mock/area.json')
        .then(this.getAreaInfoSucc)
    },
    getAreaInfoSucc: function (res) {
      if (res && res.data && res.data.ret) {
        this.area.list = res.data.data
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .header >>> .el-input__inner
    background-color: transparent
    color: #fff
  .header
    display: flex
    margin-top: .670px
    color: #fff
    height: 74px
    font-size: 32px
    .head-input
      float: left
      flex: 1
      margin-top: 9px
      margin-left: 5px
      height: 55px
      line-height: 56px
      font-size: 24px
      border-radius: 0.5rem
      background: #fff
      color:  #ccc
    .head-tab
      display: flex
      width: 150px
      margin: 0 0.1rem
      line-height: 0.8rem
      text-align: right
    .head-location
      display: flex
      width: 150px
      line-height: 73px
      text-align: center
</style>
